<template>
	<view>
		<uni-nav-bar statusBar :border='false' color="#fff" fixed :backgroundColor='backgroundColor'>
			<block slot="left">
				<view class="flex-row-flex-start">
					<image class="logo" src="/static/common/logo.png" mode=""></image>
					<view class="topTitle">
						通勤车
					</view>

				</view>
			</block>
		</uni-nav-bar>
		<view class="topView">
			<view class="title">
				通勤车签到
			</view>
			<view class="content flex-column-center">
				<view class="title1">
					<text >{{info.line_name}}</text>
					<text v-if="!isSao" style="color: red;">(请扫码签到)</text>
				</view>
				<view @click="buttonClick()" class="daka flex-column-center">
					<view class="title2">
						签到
					</view>
					<view class="time">
						{{currentTime}}
					</view>
				</view>
				<view class="address flex-row-center" style="margin-bottom: 60rpx;">
					<uni-icons type="checkbox-filled" color="#52B45D" size="20"></uni-icons>
					<text style="margin-left: 6rpx;">{{address}}</text>

					<text @click="getLocation(1)" style="color: #588DFF;margin-left: 20rpx;">刷新</text>
				</view>
			</view>
		</view>



	</view>
</template>

<script>
	import {
		mapActions,
		mapState
	} from "vuex";
	import {
		sign,
		driverSign,
		lineDetail,
		profile,
		setRole
	} from '@/api/index.js'
	export default {
		components: {},
		computed: {

		},
		data() {
			return {
				isSao:0,
				userinfo:{},
				info:{
					line_name:'',
				},
				car_id:0,
				group_id:0,
				address: '',
				timer: null,
				currentTime: '',
				list: [],
				title: "",
				backgroundColor: 'ffffff00',
				list: [],
				data: {}

			}
		},
		computed: {
			...mapState([
				'baseColor'
			]),
		},
		onPageScroll(e) {
			if (e.scrollTop > 20) {
				this.backgroundColor = "#AED0FC"
			} else {
				this.backgroundColor = "#ffffff00"
			}
		},
		onShow() {
			this.getLocation(0)
			if(uni.getStorageSync('token')){
				if(this.car_id){
					this.lineDetail()
					
				}
				this.profile()
			}
			
		},
		onLoad(e) {
			// console.log(e)
			// 1. 从 options.scene 中获取编码后的参数
			const encodedScene = e.scene; // 这里得到的是 "car_id%3D20%26group_id%3D3"

			if (encodedScene) {
				this.isSao=1
				// 2. 对参数进行URL解码
				const decodedScene = decodeURIComponent(encodedScene);
				// 解码后： "car_id=20&group_id=3"

				// 3. 将参数字符串解析为对象，方便使用
				const params = {};
				decodedScene.split('&').forEach(item => {
					const [key, value] = item.split('=');
					params[key] = value; // 注意：这里获取的value是字符串，如需数字类型需转换
				});
				this.car_id=params.car_id
				this.group_id=params.group_id
				console.log('车辆ID:', params.car_id); // 输出：20
				console.log('组ID:', params.group_id); // 输出：3
				
			}else{
				this.isSao=0
				this.car_id=0
				this.group_id=1
			}
			if(this.isSao){
				this.lineDetail()
			}
			
			this.updateTime(); // 初始化时间显示
			this.timer = setInterval(this.updateTime, 1000); // 每秒更新时间
		},
		//下拉刷新
		onPullDownRefresh() {


		},
		//加载更多
		onReachBottom() {

		},
		onPageScroll(e) {
			// if (e.scrollTop > 20) {
			// 	this.backgroundColor = "#FBF9FF"
			// } else {
			// 	this.backgroundColor = "#ffffff00"
			// }
		},
		// beforeDestroy() {
		//   clearInterval(this.timer); // 清除定时器
		// },
		methods: {
			setRole(){
				var data = {
					group_id: 3
				}
				setRole(data).then(res => {
					
				this.profile()
				
				
				})
			},
			lineDetail() {
			
				var data = {
					car_id: this.car_id
				}
				lineDetail(data).then(res => {
					
					this.info = res.data
				
				
				})
			},
			profile() {
			
				var data = {
					
				}
				profile(data).then(res => {
					// uni.navigateTo({
					// 	url:'/pages/index/setRole'
					// })
					uni.setStorageSync('userinfo', res.data)
					this.userinfo=res.data
					if(res.data.group_id){
						
					}else{
						if(this.car_id){
							if(this.group_id==3){
								this.setRole()
							}else{
								uni.navigateTo({
									url:'/pages/index/setRole'
								})
							}
							
							
						}
					}
					
				
				
				})
			},
			locationRequest(lat, lng,type) {
			
			
				var latLng = lat + ',' + lng
				uni.request({
					url: 'https://apis.map.qq.com/ws/geocoder/v1/?key=3U7BZ-EHTC5-DYHIN-IEEUQ-PP7Y3-AGF3L&location=' +
						latLng,
					data: {

					},
					header: {

					},
					success: (res) => {
						if(type){
							uni.showToast({
								title: '位置更新成功',
								icon: 'none',
								mask:true,
								duration:1500,
							});
						}
							
						this.address = res.data.result.address

					}
				});
			},

			getLocation(type) {
				var that = this
				uni.getLocation({
					type: 'wgs84',
					success: function(res) {
						console.log('当前位置的经度：' + res.longitude);
						console.log('当前位置的纬度：' + res.latitude);
						that.locationRequest(res.latitude, res.longitude,type)
					}
				});
			},
			buttonClick() {
				if(!uni.getStorageSync('token')){
					uni.navigateTo({
						url:'/pages/login/login'
					})
					return
				}
				// if(!this.car_id){
				// 	this.showToast('请扫码签到')
				// 	return
				// }
				var data = {
					is_scan:this.isSao,
					car_id: this.car_id ,
					sign_address: this.address
				}
				var url=sign
				if(this.userinfo.group_id==3){
					url =driverSign
				}
				url(data).then(res => {
					this.showToast('签到成功')
				})
			},
			updateTime() {
				const now = new Date();
				const hours = now.getHours().toString().padStart(2, '0'); // 补齐为两位数
				const minutes = now.getMinutes().toString().padStart(2, '0'); // 补齐为两位数
				const seconds = now.getSeconds().toString().padStart(2, '0'); // 补齐为两位数
				this.currentTime = `${hours}:${minutes}:${seconds}`;
			},
			


		}
	}
</script>

<style lang="scss">
	.title {
		margin-top: 80rpx;

		text-align: center;
		font-weight: 800;
		font-size: 48rpx;
		line-height: 48rpx;
		font-style: normal;
		text-transform: none;
		color: #163886;
		// background: linear-gradient(90deg, #163886 0%, #00133E 76%);
	}

	.content {
		padding: 80rpx 0;
		margin: 30rpx;
		margin-top: 50rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
	}

	.title1 {
		font-weight: bold;
		font-size: 32rpx;
		color: #333333;
	}

	.daka {
		margin-top: 180rpx;
		margin-bottom: 40rpx;
		width: 272rpx;
		height: 272rpx;
		background: linear-gradient(180deg, #4192F7 0%, #2D6AF6 100%);
		box-shadow: 0rpx 8rpx 24rpx 0rpx rgba(55, 122, 227, 0.4);
		border-radius: 50%;
	}

	.title2 {
		font-weight: bold;
		font-size: 40rpx;
		color: #FFFFFF;
	}

	.time {
		margin-top: 10rpx;
		font-weight: bold;
		font-size: 30rpx;
		color: #8EBCFA;
	}

	.address {
		width: 100%;
		font-weight: 500;
		font-size: 28rpx;
		color: #7C8187;
	}
</style>